<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定义参数</title>
	<script src="./lib/vue-2.4.0.js"></script>
	<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login?id=1&name=陆洲" tag="span">登录</router-link>
        <router-link to='/register' tag="span">注册</router-link>

        <!-- 创建一个占位符 -->
        <router-view></router-view>
    </div>

	<script>
        //创建模板对象,this.$route是一个对象,query只是其中的一个属性
        var login={
        	template:'<h1>我是登录组件,我爱你 陆洲{{$route.query.id}}---{{$route.query.name}}</h1>',
        	created(){
        		console.log(this.$route)
        	}
        }
        var register={
        	template:'<h1>我是注册组件,还是爱你 陆洲</h1>'
        }

	    //创建一个routerObj
	    var routerObj=new VueRouter({
	    	routes:[
              {path:'/login',component:login},
              {path:'/register',component:register}
	    	]
	    })

        var vm=new Vue({
        	el:'#app',
        	data:{},
        	methods:{},
        	//实例接收router对象
        	router:routerObj
        });
	</script>
</body>
</html>